<template>
  <canvas ref="canvasRef" class="fluid-background"></canvas>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let animationId = null

onMounted(() => {
  const canvas = canvasRef.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  
  // 设置canvas尺寸
  const resizeCanvas = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }
  resizeCanvas()
  window.addEventListener('resize', resizeCanvas)
  
  // 流体粒子系统
  const particles = []
  const mouse = { x: 0, y: 0, vx: 0, vy: 0 }
  let lastMouse = { x: 0, y: 0 }
  
  // 鼠标移动处理
  const handleMouseMove = (e) => {
    mouse.x = e.clientX
    mouse.y = e.clientY
    mouse.vx = mouse.x - lastMouse.x
    mouse.vy = mouse.y - lastMouse.y
    lastMouse = { ...mouse }
    
    // 在鼠标位置创建粒子
    if (Math.abs(mouse.vx) > 2 || Math.abs(mouse.vy) > 2) {
      createFluidParticles(mouse.x, mouse.y, mouse.vx, mouse.vy)
    }
  }
  
  window.addEventListener('mousemove', handleMouseMove)
  
  class FluidParticle {
    constructor(x, y, vx, vy, color) {
      this.x = x
      this.y = y
      this.vx = vx
      this.vy = vy
      this.life = 1
      this.decay = 0.01 + Math.random() * 0.02
      this.size = 20 + Math.random() * 40
      this.color = color
    }
    
    update() {
      this.x += this.vx
      this.y += this.vy
      this.vx *= 0.95
      this.vy *= 0.95
      this.life -= this.decay
      this.size *= 0.98
    }
    
    draw(ctx) {
      ctx.save()
      ctx.globalAlpha = this.life * 0.6
      
      const gradient = ctx.createRadialGradient(
        this.x, this.y, 0,
        this.x, this.y, this.size
      )
      gradient.addColorStop(0, this.color)
      gradient.addColorStop(1, 'rgba(0, 0, 0, 0)')
      
      ctx.fillStyle = gradient
      ctx.fillRect(
        this.x - this.size,
        this.y - this.size,
        this.size * 2,
        this.size * 2
      )
      
      ctx.restore()
    }
  }
  
  const isMobile = /mobile|android|iphone|ipad/i.test(navigator.userAgent)
  const particlesPerSpawn = isMobile ? 2 : 3 // 移动端减少粒子
  
  const createFluidParticles = (x, y, vx, vy) => {
    const colors = [
      'rgba(99, 102, 241, 0.8)',   // 蓝
      'rgba(139, 92, 246, 0.8)',   // 紫
      'rgba(236, 72, 153, 0.8)',   // 粉
      'rgba(0, 243, 255, 0.8)',    // 霓虹蓝
    ]
    
    for (let i = 0; i < particlesPerSpawn; i++) {
      const angle = (Math.random() - 0.5) * Math.PI
      const speed = 1 + Math.random() * 2
      const color = colors[Math.floor(Math.random() * colors.length)]
      
      particles.push(new FluidParticle(
        x,
        y,
        vx * 0.2 + Math.cos(angle) * speed,
        vy * 0.2 + Math.sin(angle) * speed,
        color
      ))
    }
  }
  
  // 自动生成背景流体
  let autoFluidTimer = 0
  const createAutoFluid = () => {
    const x = Math.random() * canvas.width
    const y = Math.random() * canvas.height
    const angle = Math.random() * Math.PI * 2
    const speed = 1 + Math.random() * 2
    
    createFluidParticles(
      x, y,
      Math.cos(angle) * speed,
      Math.sin(angle) * speed
    )
  }
  
  // 动画循环
  const animate = () => {
    // 渐隐效果
    ctx.fillStyle = 'rgba(10, 15, 30, 0.15)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    
    // 自动生成流体
    autoFluidTimer++
    if (autoFluidTimer > 30) {
      createAutoFluid()
      autoFluidTimer = 0
    }
    
    // 更新和绘制粒子
    for (let i = particles.length - 1; i >= 0; i--) {
      const particle = particles[i]
      particle.update()
      
      if (particle.life <= 0) {
        particles.splice(i, 1)
      } else {
        particle.draw(ctx)
      }
    }
    
    // 应用模糊效果（简化版）
    if (particles.length > 0 && Math.random() > 0.7) {
      ctx.globalAlpha = 0.1
      ctx.filter = 'blur(2px)'
      ctx.drawImage(canvas, 0, 0)
      ctx.filter = 'none'
      ctx.globalAlpha = 1
    }
    
    animationId = requestAnimationFrame(animate)
  }
  
  animate()
  
  // 清理
  onUnmounted(() => {
    if (animationId) {
      cancelAnimationFrame(animationId)
    }
    window.removeEventListener('resize', resizeCanvas)
    window.removeEventListener('mousemove', handleMouseMove)
  })
})
</script>

<style scoped>
.fluid-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: 0.7;
}
</style>

